// 模式切换
$themes: (
  light: (
    background_color: rgba(255,255,255,1),//#ffffff,//背景色
    background_color1: #ffffff,//背景色
    background_color2: #f7f7f7,//背景色
    background_color3: #e9e9e9,//背景色
    background_color4: #000000,//背景色
    background_color5: #f4f4f4,//背景色
    background_color6: #f4f7fd,//背景色
    background_color7: rgba(255,255,255,1),//#ffffff,//背景色
    background_color8: #ffffff,//#ffffff,//背景色
    background_color9: #cccccc,//#ffffff,//背景色
    text-color: rgba(0, 0, 0, 0.75), // 主文本色
    text-color1: rgb(0, 0, 0), // 主文本色1
    text-color2: #999, // 主文本色2
    text-color3: #666, // 主文本色3
    text-color-hover: #317adf, // hover文本色
    border_style: 1px solid #ebeef5, // 主边框色
    border_style1: 1px solid #dddddd, // 主边框色1
    border_style2: 1px solid skyblue, // 主边框色2
    border_style3: 1px solid #ebeef5, // 主边框色3
    border_style4: 1px solid #ebeef5, // 主边框色4
    border_bottom_style: 1px solid #f4f4f4, // 下边框色
    border_bottom_style1: 1px solid #f6f6f6, // 下边框色1
    border_right_style: 1px solid #f1f1f1, // 右边框色
    border_top_style: 1px solid #f1f1f1, // 上边框色  (未使用)
    box_shadow: 0 1px 3px 0 #ddd, // 主阴影
  ),
  dark: (
    background_color: #1c1f2d,//rgba(25, 28, 38,.8),//#181c27,//rgba(0, 0, 0, 0.35),//背景
    background_color1: #1e1e1e,//背景1
    background_color2: #1e1e1e,//背景2
    background_color3: #252526,//背景3
    background_color4: #f7f7f7,//背景4
    background_color5: linear-gradient(to right bottom,#000 25%,#480048),//#333333,//背景5
    background_color6: #1e1e1e,//背景6
    background_color7: #181c27,//rgba(0, 0, 0, 0.35),//背景
    background_color8: #1e2028,//rgba(0, 0, 0, 0.35),//背景
    background_color9: #333333,//rgba(0, 0, 0, 0.35),//背景
    text-color: rgba(255, 255, 255, 0.7), // 文本色
    text-color1: rgba(255, 255, 255, 0.65), // 文本色1
    text-color2: #999, // 主文本色2
    text-color3: #aaa, // 主文本色3
    text-color-hover: #f1cb64, // hover文本色
    border_style: none, // 边框色
    border_style1: 1px solid #333333, // 边框色1
    border_style2: 1px solid #666666, // 边框色2
    border_style3: 1px solid #333333, // 边框色3
    border_style4: 1px solid #333333, // 边框色4
    border_bottom_style: 1px solid #252526, // 下边框色
    border_bottom_style1: 1px solid #1e1e1e, // 下边框色1
    border_right_style: 1px solid #252526, // 右边框色
    border_top_style: 1px solid #252526, // 上边框色
    box_shadow: 0 1px 3px 0 #181c27, // 主阴影
  )
);


//遍历主题map
@mixin themeify {
  @each $theme-name, $theme-map in $themes {
    //!global 把局部变量提升为全局变量
    $theme-map: $theme-map !global;
    //判断html的data-theme的属性值  #{}是sass的插值表达式
    //& sass嵌套里的父容器标识   @content是混合器插槽，像vue的slot
    [data-theme="#{$theme-name}"] & {
      @content;
    }
  }
}

//声明一个根据Key获取颜色的function
@function themed($key) {
  @return map-get($theme-map, $key);
}

//获取背景颜色
@mixin background_color($color) {
  @include themeify {
    background: themed($color)!important;
  }
}
//获取字体颜色
@mixin font_color($color) {
  @include themeify {
    color: themed($color)!important;
  }
}

// 获取边框样式
@mixin border_style($color) {
  @include themeify {
    border: themed($color)!important;
  }
}
@mixin border_bottom_style($color) {
  @include themeify {
    border-bottom: themed($color)!important;
  }
}
@mixin border_right_style($color) {
  @include themeify {
    border-right: themed($color)!important;
  }
}
@mixin border_top_style($color) {
  @include themeify {
    border-top: themed($color)!important;
  }
}

// 获取盒阴影样式
@mixin box_shadow($color) {
  @include themeify {
    box-shadow: themed($color)!important;
  }
}
